<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <title>Blog</title>
        <link type="text/css" href="/static/css/ui-darkness/jquery-ui-1.8.6.custom.css" rel="stylesheet" />	

        <style type="text/css">
        html, body {
            background:	#666;
            width:		100%;
            height:		100%;
            padding:	0;
            margin:		0;
            overflow:	auto; /* when page gets too small */
        }
        #container {
            background:	#999;
            height:		100%;
            margin:		0 auto;
            width:		100%;
            //max-width:	900px;
            min-width:	700px;
            _width:		700px; /* min-width for IE6 */
        }
        .pane {
            display:	none; /* will appear when layout inits */
        }
        </style>

        <!--
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        -->
        <script type="text/javascript" src="/static/js/jquery-1.4.2.min.js"></script>
        <script type="text/javascript" src="/static/js/jquery-ui-1.8.6.custom.min.js"></script>
        <script type="text/javascript" src="/static/js/jquery.cookie.js"></script>
        <script type="text/javascript" src="/static/js/jquery.layout-1.2.0.js"></script>

        <link rel='stylesheet' type='text/css' href='/static/css/dynatreeskin/ui.dynatree.css'>
        <script src='/static/js/jquery.dynatree.js' type='text/javascript'></script>

        <script type="text/javascript" charset="utf-8">
            $(document).ready(function() {
                // Layout
                $('#container').layout(
                    {
                    applyDefaultStyles: true,
                    west__onresize: function () {
                            $('#postlist').accordion('resize')
                        }
                    }
                );
                
                // Accordion
                $("#postlist").accordion({fillSpace: true, header: "h3"});
                
                $(".post").click(function() {
                    if ( !$(this).hasClass("post-loaded") ) {
                        var self = this;
                        var post_id = $(this).attr("id")
                        var data = {"post_id":post_id};
                        $.getJSON("/blog/json", data, function(data) {
                            $(data).appendTo($(self)).fadeIn();
                            $(self).addClass("post-loaded");
                        });
                    };
                });
                
                // Attach the dynatree widget to an existing <div id="tree"> element
                // and pass the tree options as an argument to the dynatree() function:
                $("#tree").dynatree({
                    imagePath: "/static/css/dynatreeskin",
                    fx: { height: "toggle", duration: 200 },
                    onLazyRead: function(node){
                        node.appendAjax({url: "/blog/json_lazy_tree",
                                           data: {"key": node.data.key, // Optional url arguments
                                                  "mode": "all"
                                                  },
                                           success: function(node) {
                                               // Called after nodes have been created and the waiting icon was removed.
                                               // 'this' is the options for this Ajax request
                                               },
                                           error: function(node, XMLHttpRequest, textStatus, errorThrown) {
                                               // Called on error, after error icon was created.
                                               alert("lazy error " + node.data.title);
                                               },
                                           cache: false // Append random '_' argument to url to prevent caching.
                                          });
                    },
                    //onActivate: function(node) {
                    //    // A DynaTreeNode object is passed to the activation handler
                    //    // Note: we also get this event, if persistence is on, and the page is reloaded.
                    //    alert("You activated " + node.data.title);
                    //},
                    persist: true,
                    children: [ // Pass an array of nodes.
                        {title: "Item 1"},
                        {title: "Folder 2", isFolder: true, isLazy: true},
                        {title: "Item 3"},
                        {title: "Folder 4", isFolder: true,
                            children: [
                                {title: "Sub-item 4.1"},
                                {title: "Sub-item 4.2"}
                            ]
                        }
                    ]
                });
                
            });
        </script>
    </head>
    <body>

        <DIV id="container">
            <DIV class="pane ui-layout-west">
                <div id="tree"> </div>
            </DIV>
            <DIV class="pane ui-layout-north">
                {% if MGL %}
                <img
                    title="MGL - Logo" 
                    src="http://intranet/mgl/images/news.jpg"
                    alt="MGL - Logo" 
                    width="64" height="64"
                >
                <font color="#FF8B00">MGL</font>
                {% else %}
                <img
                    title="SupamonkS - Logo" 
                    src="http://medias.3dvf.com/publish/supamonks_lapins_cretins/logo_ARCUEIL_SEUL.PNG"
                    alt="SupamonkS - Logo" 
                    width="64" height="64"
                >
                <font color="#9F2427">SPMKS</font>
                {% endif %}
            </DIV>
            <DIV class="pane ui-layout-south">South</DIV>
            <DIV class="pane ui-layout-east">
                <div id="postlist">
                    {% for post in posts %}
                        <div class="post" id={{post.id}}>
                            <h3><a href="#">{{post.title}}</a></h3>
                        </div>
                    {% endfor %}
                </div>
            </DIV>
            <DIV class="pane ui-layout-center">Center</DIV>
        </DIV>

    </body>
</html>
